<template>
  <div>
    <van-nav-bar
      :left-text="getCurrentTime()"
      title="我的"
      fixed
      placeholder
    /><br /><br />
    <!--头像-->
    <div class="TouXiang"></div>
    <br />
    <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 30px;">ID:{{uid}}</font>
    <br /><br /><br />
    
    <audio controls="controls" hidden src="../assets/music/pointer.mp3" ref="audio"></audio>
    <!--日期计算器弹出按钮-->
    <el-button @click="Drawer1" type="primary" style="width: 40%;">
      日期计算器
    </el-button>

    <!--日期计算器弹框-->
    <el-dialog
      title="日期计算器"
      :visible.sync="drawer1"
      direction="btt"
      class="count"
    >
      <span>
        
        <!--输入开始时间-->
        <el-date-picker
          placeholder="请选择开始日期"
          v-model="begin"
          type="date" 
          class="srk"
          clearable
          value-format="yyyy-MM-dd"
        >
        </el-date-picker
        >
        &nbsp;&nbsp;
        <!--输入结束时间-->
        <el-date-picker
          placeholder="请选择结束日期"
          v-model="end"
          type="date" 
          class="srk"
          clearable
          value-format="yyyy-MM-dd"
        >
        </el-date-picker
        >&nbsp;&nbsp;<br /><br />
    <el-button type="primary" @click="getDay" >计算</el-button><br /><br />

    <!--显示模块-->
    <div class="xs1">
      <div style="height: 65px"></div>
      <div style="height: 15px; text-align: center">
        <a class="js"> {{ day1 }}</a
        ><a class="day">{{ day }}</a
        ><a class="js">{{ day2 }}</a>
      </div>
    </div>
      </span>
    </el-dialog>
    
    <br /><br />
  <!--倒计时弹出按钮-->
    <el-button @click="Drawer3" type="primary" style="width: 40%;">
      倒计时
    </el-button>

    <!--倒计时弹框-->
    <el-dialog
      title="倒计时"
      :visible.sync="drawer3"
      direction="btt"
      class="clock"
    >
      <span>
        <div>
        <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 15px;">{{pointer1}}</font>
        <br />
      <el-input
          placeholder=""
          v-model="tinme1"
          clearable
          maxlength="3"
          style="width: 100px;"
        >
      </el-input>&nbsp;分<br /><br />
      <el-input
          placeholder=""
          v-model="tinme2"
          clearable
          maxlength="3"
          style="width: 100px;"
        >
      </el-input>&nbsp;秒
        <br /><br />
        <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 30px;">{{countDown}}</font>
        <br /><br />
    <el-button :disabled="disabled" @click="startCountDown" type="primary">开始</el-button>
    <el-button @click="Stop" type="danger">重置</el-button>
    </div>
      </span>
    </el-dialog>
    <br /><br />

  <!--那年今日弹出按钮-->
    <el-button @click="Drawer4" type="primary" style="width: 40%;">
      那年今日
    </el-button>

    <!--那年今日弹框-->
    <el-dialog
      title="那年今日"
      :visible.sync="drawer4"
      direction="btt"
      class="palinmnesis"
    >
      <span >
       
        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

        <el-table-column type="index" align="center" label="序号"></el-table-column>

        <el-table-column prop="name" label="名称" align="center"></el-table-column>

        <el-table-column prop="date" label="时间" align="center"></el-table-column>

        <el-table-column prop="remarks" label="备注" align="center"></el-table-column>

        <el-table-column prop="calendar" label="历法" align="center"></el-table-column>

        <el-table-column label="操作" align="center">

            <template slot-scope="scope">

        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>

    </template>

    </el-table-column>

    </el-table>

      </span>
    </el-dialog>

    <br /><br />
    <!--历史上的那些事弹出按钮-->
    <el-button @click="history" type="primary" style="width: 40%;">
      历史上今天的那些事儿
    </el-button>

    <!--历史上的那些事弹框-->
    <el-dialog
      title="历史上今天的那些事儿"
      :visible.sync="historydrawer"
      direction="btt"
      class="history"
    >
      <span>
        <div style="overflow: auto;height: 520px;">
          <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
          font-size: 20px;color: cornflowerblue;">{{time}}</font><br /><br />
        <div :key="i" v-for="(item, i) in today" style="text-align: left;">
          <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 15px;">{{item.text}}</font>
        <br /><br />
        </div>
      </div>
      </span>
    </el-dialog>


    <br /><br />
    <br /><br />
  <!--公告弹出按钮-->
    <el-button @click="Bulletindrawer" type="warning" style="width: 40%;">
      公告
    </el-button>

    <!--公告弹框-->
    <el-dialog
      title="公告"
      :visible.sync="bulletindrawer"
      direction="btt"
      class="bulletin"
    >
      <span>
        <div style="overflow: auto;height: 520px;">
        <div :key="i" v-for="(item, i) in bulletinList" style="text-align: left;">
          <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 20px;color: tomato;">{{i+1}}、{{item.text}}</font>
        <br /><br />
        </div>
        </div>
      </span>
    </el-dialog>


    <br /><br />
  <!--反馈弹出按钮-->
    <el-button @click="Help" type="warning" style="width: 40%;">
      反馈
    </el-button>

    <!--反馈弹框-->
    <el-dialog
      title="反馈"
      :visible.sync="HelpDrawer"
      direction="btt"
      class="help"
    >
      <span>
          <div style="text-align: left;width: 60%;">
            联系方式：<br />
            <el-input
              type="textarea"
              style="width: 50%;"
              maxlength="20"
              placeholder="QQ / 手机号 / 微信号"
              v-model="fkphone">
            </el-input>
            <div style="margin: 20px 0;"></div>
            您的问题：
            <el-input
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 4}"
              placeholder="请输入内容"
              v-model="fktext">
            </el-input>
            <br /><br />
            <el-button @click="HelpUp" type="primary" style="width: 40%;">
              提交
            </el-button>

          </div>
      </span>
    </el-dialog>

    <br /><br />
    <!--修改密码弹出按钮-->
    <el-button @click="Drawer2" type="danger" style="width: 40%;">
      修改密码
    </el-button>

    <!--修改密码弹框-->
    <el-dialog
      title="修改密码"
      :visible.sync="drawer2"
      direction="btt"
      class="password"
    >
      <span>
        <!--提示文字-->
        <font style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: red;font-size: 20px;">
              {{Pointer}}
            </font>
            <br />
        <el-input
          placeholder="请输入原密码"
          v-model="OldPassword"
          clearable
          maxlength="18"
          show-password
          style="width: 85%;"
        >
        </el-input>
        <br /><br />
        <el-input
          placeholder="请确认新的key"
          v-model="key"
          class="srk"
          clearable
          maxlength="5"
          show-password
          style="width: 85%;"
        >
        </el-input>
        <br /><br />
        <el-input
          placeholder="请输入新密码"
          v-model="Password"
          clearable
          maxlength="18"
          show-password
          style="width: 85%;"
        >
        </el-input>
        <br /><br />
        <el-input
          placeholder="请确认新密码"
          v-model="NewPassword"
          class="srk"
          clearable
          maxlength="18"
          show-password
          style="width: 85%;"
        >
        </el-input>

        <br /><br />
        <el-button type="danger" @click="UpdataPassword">修改</el-button><br /><br />
      </span>
    </el-dialog>
    
    <br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</template>
<script>
import { NavBar } from "vant";
import { Field, CellGroup } from "vant";
export default {

  //顶栏
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      date: new Date(), // 当前日期实例化
      day1: "", //存字符：相差
      day: "", //存计算结果
      day2: "", //存字符：天
      begin: "", //获取开始时间
      end: "", //获取结束时间
      uid:sessionStorage.getItem("uid"),
      drawer1: false,
      drawer2: false,//修改密码
      drawer3: false,
      drawer4:false,
      bulletindrawer:false,//公告
      HelpDrawer:false,//反馈
      OldPassword:"",//修改密码
      Password:"",//修改密码
      NewPassword:"",//修改密码
      key:"",//修改密码
      Pointer:"",
      disabled: false, // 按钮是否可用
      countDown: 0 ,// 倒计时时间（单位：秒）
      tinme2:0,
      tinme1:0,
      pointer1:"",
      dataList: [],//那年今日页要展示的列表数据
      LSdataList: [],//那年今日页要展示的列表数据(临时保管)
      LSdataList2: [],//那年今日页要展示的列表数据(临时保管2)
      historydrawer:false,//历史上的那些事
      LStoday:[],//历史上的那些事用来装api返回的信息--中转
      today:[],//历史上的那些事用来装api返回的信息中转
      time:(new Date().getMonth()+1)+
      " 月 "+new Date().getDate()+" 日 ",//历史上的那些事当天时间
      bulletinList:[],//公告数据存放
      fktext:"",
      fkphone:"",
    };
  },
  created() {
    // 每0.1秒更新一次日期
    this.timer = setInterval(this.getTime, 100);
    this.getAll();
    this.getBulletin();
  },
  methods: {
    getAll(){
      this.$axios({
                        url:"http://localhost/festival/cx/"+this.uid,
                        method:"get",
                        data:{
                        },
                    })
                        .then((res)=>{
                            this.LSdataList = res.data.data;
                            this.getFestival();
                        })
    },
    getBulletin(){
      this.$axios({
                        url:"http://localhost/bulletin",
                        method:"get",
                        data:{
                        },
                    })
                        .then((res)=>{
                            this.bulletinList = res.data.data;
                        })
    },
    //当前日期
    getTime() {
      // 更新当前日期变量
      this.date = new Date();
    },

    // 左上角当前时间
    getCurrentTime() {
      const hm = this.date.getHours() >= 12 ? "PM" : "AM";
      return (
        this.date.getHours() +
        ":" +
        this.date.getMinutes() +
        ":" +
        this.date.getSeconds() +
        " " +
        hm
      );
    },
    
    // 计算模块
    getDay() {
      if (this.begin != "" && this.end != "") {
        // 传入日期， 第一个是开始时间，第二个是结束时间
        const days = this.getBeginTime(this.begin, this.end);
        var str;
        //输出绝对值
        if (days < 0) {
          str = -days;
        } else if (days == 0) {
          str = days;
        } else {
          str = days;
        }
        this.day1 = "相差：";
        this.day = str;
        this.day2 = "天";
      } else {
        this.$message({
          message: "请输入日期",
          type: "warning",
        });
      }
    },
    Drawer1(){
      this.drawer1 = true;
      this.begin = "";
      this.end = "";
      this.day = "";
      this.day1 = "";
      this.day2 = "";
    },
    Drawer2(){
      this.drawer2 = true;
      this.Pointer = "";
      this.OldPassword = "";
      this.Password = "";
      this.NewPassword = "";
    },
    Drawer3(){
      this.drawer3 = true;
      this.pointer1 = "";
    },
    //密码修改
    UpdataPassword(){
      if(this.OldPassword == "" || this.Password == "" || this.NewPassword == ""){
        this.Pointer = "请完整输入！";
      }
      else if(this.Password.length < 8){this.Pointer = "请输入8-18位密码！"}
      else if(this.key.length < 5){this.Pointer = "请输入5位key！"}
      else{
        if(this.Password != this.NewPassword){
          this.Pointer = "两次密码不一致！";
        }
        else{
          
          this.$axios({
          url:"http://localhost/users/cx/"+this.uid+"/"+this.OldPassword,
          method:"get",
          })
          .then((res)=>{
            if(res.data[0] == "true"){
              this.$axios({
                url:"http://localhost/users/",
                method:"put",
                data:{
                  id:res.data[2],
                  uid:res.data[3],
                  password:this.NewPassword,
                  judge:1,
                  kkey:this.key
                }
              }).then((res)=>{this.$confirm("修改成功,请记住您的密码"+this.NewPassword,"提示",{type:"info"}).then(()=>{
                this.drawer2 = false
              })})
              .catch((err)=>{this.$confirm("修改失败","提示",{type:"info"}).then(()=>{
              })})
            }
            else if(res.data[0] == "false"){
              this.Pointer = "原密码不正确！";
            }
          })
          
        }
      }
    },
    //倒计时开始--------------------------------------
    startCountDown() {
      if(this.tinme1 == 0 || this.tinme1 == null){
        if(this.tinme2 != 0 && this.tinme2 != null){
          this.countDown = this.tinme2
        }else this.pointer1 = "请输入时间";
        
      }
      else if(this.tinme2 == 0 || this.tinme2 == null){
        if(this.tinme1 != 0 && this.tinme1 != null){
          this.countDown = this.tinme1*60;
        }
      }
      else{
        this.countDown = parseInt(this.tinme1 * 60) + parseInt(this.tinme2);
      }      

    this.disabled = true; // 禁用按钮
    let timer = setInterval(() => {
      if (this.countDown > 0) {
        this.countDown--;
      } else {
        clearInterval(timer);
        this.disabled = false; // 启用按钮
        this.countDown = "倒计时已经结束";
        this.$refs.audio.currentTime = 0; //从头开始播放提示音
        this.$refs.audio.play();
      }
    }, 1000);
    },
    //倒计时重置--------------------------------------
    Stop(){
      this.countDown = 0;
      this.tinme1 = 0;
      this.tinme2 = 0;
    },
    getFestival() {
      this.LSdataList.forEach((item) => {
        var day = this.getNewDate(new Date())
        var day2 = item.date
        if(day.substring(4,10)==day2.substring(4,10)){
        const strs = {
          id:item.id,
          name: item.name,
          date: item.date,
          remarks: item.remarks,
          calendar: item.calendar,
        };
        this.LSdataList2.push(strs);
      }
      });
      this.dataList = this.LSdataList2
      this.LSdataList2 = [];
    },
     // 获取新历日期
    getNewDate(date, year = 0) {
      var str1 = date.getFullYear();
      var str2 = date.getMonth()+1;
      var str3 = date.getDate();
      if(str2<10){str2 = "0"+str2}
      if(str3<10){str3 = "0"+str3}
      return (str1+"-"+str2+"-"+str3);
    },
     // 计算开始日期和结束日期差几天
    getBeginTime(begin, end) {
      var day = parseInt((new Date(end).getTime() - new Date(begin).getTime())) / (24 * 60 * 60 * 1000 );
      return Math.floor(day);
    },
    Drawer4(){
      this.drawer4 = true;
    },
    Help(){
      this.HelpDrawer = true;
    },
    handleDelete(row) {
                    this.$confirm("此操作永久删除当前信息，是否继续？","提示",{type:"info"}).then(()=>{
                                this.$axios({
                                url:"http://localhost/festival/"+row.id,
                                method:"delete",
                                data:{

                                },
                            }).then((res)=>{
                                if(res.data.flag){
                                this.$message.success("删除成功");
                                this.getAll();
                                }
                                else{
                                    this.$message.error("数据同步失败，自动刷新！");
                                    this.getAll()
                                }
                            })
                            }).catch(()=>{
                        });
            },
    history(){
      this.historydrawer = true;
      if(this.today[0] == null){
        this.$axios({
                          url:'/api/todayOnhistory/queryEvent.php?key=8b88144d201146d36acdae0477bdf3dc&date='
                          +(new Date().getMonth()+1)+"/"+new Date().getDate(),
                          method:"get",
                          data:{
                          },
                      }).then((res)=>{
                          this.LStoday = res.data.result;
                          this.LStoday.forEach((item) => {
                            const strs = {
                                  text:item.date + "," + item.title + "。",
                                };
                              this.today.push(strs);
                          })
                      })
      }
    },
    Bulletindrawer(){
      this.bulletindrawer = true;
    },

    //-------------------------------反馈提交
    
    HelpUp(){
      this.$axios({
            url:"http://localhost/help",
            method:"post",
            data:{

              uid:this.uid,
              fkphone:this.fkphone,
              fktext:this.fktext,
              date:(new Date().getFullYear())+" / " + (new Date().getMonth()+1)+" / "+new Date().getDate()

            },
            }).then((res)=>{
              this.$message.success("提交成功");
              this.HelpDrawer = false;
            })
    }
  },
  
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },

};
</script>

<style scoped lang="less">
.input {
  width: 80%;
  margin: 0px auto;
}
.js {
  color: #519678;
  font-size: 25px;
}
.day {
  color: #287553;
  font-size: 50px;
}
.xs1 {
  width: 70%;
  height: 200px;
  background: url("../assets/custom/0.jpg");
  margin: 0 auto;
  border-radius: 30px;
}
.TouXiang {
  width: 200px;
  height: 200px;
  background: url("../assets/ui/TouXiang.jpg")center center no-repeat;
  margin: 0 auto;
  border-radius: 30px;
  background-size: 100% 100%;
}
.history{
  background: url("../assets/custom/16.jpg");
}
.count{
  background: url("../assets/custom/14.jpg");
}
.clock{
  background: url("../assets/custom/13.jpg");
}
.palinmnesis{
  background: url("../assets/custom/15.jpg");
}
.password{
  background: url("../assets/custom/17.jpg");
}
.bulletin{
  background: url("../assets/custom/18.jpg");
}
.help{
  background: url("../assets/custom/19.jpg");
}
</style>